<template>

    <!-- template是虚拟的，不会产生实际的DOM节点 它很适合用作循环或条件渲染的包装器  -->
    <template v-for="item in props.menuData">
        <!-- 引入点击事件触发跳转 -->
        <el-menu-item @click="handleClick(item)" v-if="!item.children || item.children.length == 0"
            :index="item.meta.path" :key="`${props.index}-${item.meta.id}`">
            <el-icon size="20">
                <!-- 动态组件渲染 is的值来决定渲染哪个组件 -->
                <component :is="item.meta.icon" />
            </el-icon>
            <span>{{ item.meta.name }}</span>
        </el-menu-item>

        <el-sub-menu v-else :index="item.meta.path">
            <template #title>
                <el-icon size="20">
                    <!-- 动态组件渲染 is的值来决定渲染哪个组件 -->
                    <component :is="item.meta.icon" />
                </el-icon>
                <span>{{ item.meta.name }}</span>
            </template>

            <!-- 递归组件调用自身 -->
            <tree-menu :menuData="item.children" />
        </el-sub-menu>
    </template>

</template>

<script setup name="TreeMenu">

// 引入menuStore
import { useMenuStore } from '@/stores/menu'

// 引入router
import { useRouter } from 'vue-router'
const router = useRouter()

// 使用menuStore
const menuStore = useMenuStore()
const { addMenu } = menuStore

// defineProps返回的是props对象，所以要取menuData（props对象中的数据）要用.menuData
const props = defineProps(['menuData', 'index'])
console.log(props.menuData)


// 点击菜单项
function handleClick(item) {
    router.push(item.meta.path)
    // 将点击的菜单项添加到menuStore中
    addMenu(item.meta)
}

</script>

<style scoped></style>